<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-09-15 15:36:56
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2022-11-17 13:07:40
 * @FilePath: \grazlink20\uc_sys\src\components\Lee\See\src\LeeSee.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { PropType } from 'vue'
import { Descriptions } from '@/components/Descriptions'
import { ElImage } from 'element-plus'
defineProps({
  // 数据
  data: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  // 结构（JSON）
  schema: {
    type: Array as PropType<any>,
    default: () => []
  }
})

// 字典通过value获取label
const getDictLabel = (dictData, value) => {
  let data = dictData.find((item) => {
    return item.value == value
  })
  return data ? data.label : ''
}
</script>

<template>
  <Descriptions :schema="schema" :data="data || {}" v-bind="$attrs">
    <template v-for="(item, index) in schema" :key="index" #[item.field]="{ row }">
      <div v-if="item.component == 'Dict'">{{
        getDictLabel(item.componentProps.options, row[item.field])
      }}</div>
      <ElImage v-else-if="item.component == 'Image' && row[item.field]" :src="row[item.field]" />
      <div v-else>{{ row[item.field] }}</div>
    </template>
  </Descriptions>
</template>
